<template>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>直播商品</span>
            </div>
        </div>
        <div class="mar_t20">
            <el-button type="primary" size="medium" @click="handleEdit" class="mar_b10">添加直播商品</el-button>
            <el-button :loading="updtebtn" type="primary" plain size="medium" @click="updateLive" class="mar_b10">同步商品</el-button>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="审核通过" name="2"></el-tab-pane>
                <el-tab-pane label="审核中" name="1"></el-tab-pane>
                <el-tab-pane label="未审核" name="0"></el-tab-pane>
                <el-tab-pane label="审核驳回" name="3"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    :data="list"
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="goodsId"
                        label="商品Id"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column
                        label="商品图"
                        width="100"
                >
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p><img :src="scope.row.coverImgUrl" class="listImgWidth"/></p>
                            <div slot="reference" class="name-wrapper">
                                <div class="imgbox"><img :src="scope.row.coverImgUrl" class="tabimg"/></div>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="价格"
                >
                    <template slot-scope="scope">
                        <div class="priceType=='2'"></div>
                        {{scope.row.price}}~{{scope.row.price2}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="小程序路径"
                >
                </el-table-column>
                <el-table-column
                        prop="live_status"
                        label="添加方式"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.thirdPartyTag=='2'">后台添加</div>
                        <div v-else>控制台添加</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
<!--                            <el-button type="text" @click="handleEdit(scope.row)">查看</el-button>-->
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {goodList,delGoods} from "@/api/plug";

    export default {
        created() {
            this.fetchData();
        },
        data() {
            return {
                activeName: '2',
                synchro:'',
                list: [],
                listLoading: false,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                updtebtn:false,
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await goodList({page: this.page.currentPage,status: this.activeName,synchro:this.synchro});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
                this.updtebtn = false
            },
            handleCurrentChange(val) {
                this.synchro = 0
                this.page.currentPage = val;
                this.fetchData();
            },
            updateLive() {
                this.updtebtn = true
                this.synchro = 1
                this.fetchData()
            },
            handleClick() {
                this.synchro = 0
                this.fetchData();
            },
            handleDelete(row) {
                if (row.goodsId) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await delGoods({goodsId: row.goodsId});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.goodsId);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await delGoods({id,});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            handleEdit(row) {
                if (row.goodsId) {
                    this.$router.push(`/livegoodsAdd?goodsId=${row.goodsId}`);
                } else {
                    this.$router.push({path: 'livegoodsAdd'})
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    .listImgWidth {
        width: 120px;
        height: 120px;
    }

    .tabimg {
        width: 30px;
        height: 30px;
    }

    .msgtext {
        text-indent: -60px;
        padding-left: 70px;
    }
    .tind{
        text-indent: 14px;
    }
</style>
